<template>
<el-row class="all">
    <el-col :span="18">{{info}}</el-col>
    <el-col :span="6"> <el-button type="primary" @click="getMessageList">查找</el-button> </el-col>
</el-row>
<el-dialog v-model="isShowDialog" top="5vh">
    <el-scrollbar max-height="80vh" >
       <el-row class="row" v-for="(item,index) in messageList" :key="index" >
        <el-col :span="4">{{ item.userName }}</el-col>
        <el-col :span="8"> {{ item.createTime }}</el-col>
        <el-col v-if="item.type == 0" :span="12">{{  item.content }}</el-col>
        <el-col v-else :span="12"><img class="image" :src="api.url+'/getMessageImg/'+item.content" > </el-col>
       </el-row>
    </el-scrollbar>
</el-dialog>
</template>
<script >
import api from "@/api/service"
import { useUser } from "@/store"
export default{
    data(){
        return {
            isShowDialog:false, 
            messageList:null,     
        }
    },
    methods:{
        getMessageList(){
            const userStore = useUser()
            if(this.searchType == 1) api.getUserMessageListInChatRoom(userStore.chatId,this.searchInfo).then(resp=>{
                //for(var item in resp) item = JSON.parse(item);
                this.messageList = resp;
            })
            if(this.searchType == 2) api.getTypeMessageListInChatRoom(userStore.chatId,this.searchInfo).then(resp=>{
                this.messageList = resp
            })
            if(this.searchType == 3) api.getTimeMessageListInChatRoom(userStore.chatId,this.searchInfo).then(resp=>{
                this.messageList = resp;
            })
            this.isShowDialog = true;
            
        }
    },
    props:{
        info:{
            type:String,
            required:true
        },
        searchInfo:{
            type:String,
            required:true
        },
        searchType:{
            type:Number,
            required:true
        }
    }
}

</script>
<style scoped>
.all{
    display: flex;
    justify-content: space-between;
    margin-top:20px;
}
.row{
    margin-top: 10px;
}
.image{
    margin-right: 5px;
    max-height: 100px;
}
</style>